import 'package:flutter/material.dart';

void main() {
  // 1. 运行应用程序。
  runApp(const MaterialApp(home: Main()));
}

class Main extends StatelessWidget {
  const Main({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('网格布局-GridView'),
        backgroundColor: Colors.red,
        centerTitle: true,
      ),
      body: Container(
          padding: const EdgeInsets.all(10),
          child: GridView(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3, // 横向显示n个元素
              crossAxisSpacing: 10, // 横向间距为10
              mainAxisSpacing: 10, // 纵向间距为10
              childAspectRatio: 1, // 宽高比
            ),
            children: [
              Container(
                color: Colors.amber,
                child: Text('1'),
                alignment: Alignment.center,
              ),
              Container(
                color: Colors.blue,
                child: Text('2'),
                alignment: Alignment.center,
              ),
              Container(
                color: Colors.green,
                child: Text('3'),
                alignment: Alignment.center,
              ),
              Container(
                color: Colors.yellow,
                child: Text('4'),
                alignment: Alignment.center,
              ),
              Container(
                color: Colors.pink,
                child: Text('5'),
                alignment: Alignment.center,
              ),
              Container(
                color: Colors.purple,
                child: Text('6'),
                alignment: Alignment.center,
              ),
            ],
          )),
    );
  }
}
